1
00:00:00,520 --> 00:00:03,060
Hell you are welcome to this lecture.

2
00:00:03,270 --> 00:00:09,510
This lecture or we are going to be creating this structure for our app.

3
00:00:09,510 --> 00:00:11,470
He is in hastier mail.

4
00:00:14,530 --> 00:00:19,350
Saw I have got my text editor all point higher inside the index.

5
00:00:19,370 --> 00:00:22,170
Hate mail far which is what I've highlighted.

6
00:00:22,370 --> 00:00:27,400
So this is where I will create these structure for the app.

7
00:00:27,750 --> 00:00:29,650
Me with this is going to work.

8
00:00:29,730 --> 00:00:33,750
What I am going to do rather than you watch me type the code.

9
00:00:33,930 --> 00:00:41,160
I would prefer write the code and then explain what I have done.

10
00:00:41,310 --> 00:00:48,100
Line one here I have got a line of code here which is known as the declaration.

11
00:00:48,100 --> 00:00:52,120
This busily is the first thing you do in an 8 year old document.

12
00:00:52,280 --> 00:00:53,690
Oh what this does.

13
00:00:53,690 --> 00:01:03,730
It notifies the web browser that the page they are about to view is in his tier Mail 5 document

14
00:01:06,080 --> 00:01:09,180
line two and line four.

15
00:01:09,350 --> 00:01:15,650
They are hastier mail tags so that's where the actual hits here mail begins.

16
00:01:15,650 --> 00:01:23,090
So the content between these two tags here is what will be the hastier mail content.

17
00:01:23,150 --> 00:01:32,780
So in between this his email tags will nest either tax that all together we will drop the hasty mail

18
00:01:32,810 --> 00:01:40,340
content line 2 here is just the beginning of his term old tag followed by the blank.

19
00:01:40,340 --> 00:01:44,950
This is an attribute value to use it which means English.

20
00:01:44,990 --> 00:01:50,870
So without tubules you need to enclose their values in quotes.

21
00:01:50,990 --> 00:01:57,980
Every tag most tags you'd have in plain clothes in the closing tag you can tell by the forward slash

22
00:01:58,340 --> 00:02:02,530
before the tag is closed.

23
00:02:02,570 --> 00:02:10,030
I have added some more code which is the head tag from Line 3 here to line 7.

24
00:02:10,070 --> 00:02:15,820
You can see a bigger pair because you've got a dotted line under the closing and on daddy be opening

25
00:02:15,830 --> 00:02:17,990
tack So this is the head tack.

26
00:02:18,000 --> 00:02:24,290
Most of the tags or information within the header tag is not visible within the browser.

27
00:02:24,440 --> 00:02:27,220
That means visitors can't see them.

28
00:02:27,290 --> 00:02:33,520
The only there for information purposes are and also to help with search changes.

29
00:02:33,530 --> 00:02:41,860
All right so inside the head tab we've got a few men that tags with attributes attached.

30
00:02:42,140 --> 00:02:43,700
So were the first line on line.

31
00:02:43,700 --> 00:02:49,390
For there we've caught the mid tag and we've got a major cast set.

32
00:02:49,400 --> 00:02:58,010
The cast set is the attribute and the value is utf that it is basically the type of encoding that is

33
00:02:58,010 --> 00:03:05,420
used in most Web browsers so most characters are supported by the UTI.

34
00:03:05,470 --> 00:03:08,640
That it is an encoding type line 5 here.

35
00:03:08,660 --> 00:03:15,260
We've got a metal bar with a attribute of knowing Lin name.

36
00:03:15,260 --> 00:03:19,900
Basically it's the attribute and the value is viewport viewport.

37
00:03:20,000 --> 00:03:27,820
Basically it refers to this screen size of any device a wall is saying here is that these this website

38
00:03:27,830 --> 00:03:35,570
or this map is adaptable to any screen size so regardless of what device you using to view you be able

39
00:03:35,570 --> 00:03:38,000
to fit it to the screen size.

40
00:03:38,000 --> 00:03:41,340
That's basically what five is saying.

41
00:03:42,210 --> 00:03:49,880
Okay you can see the content here see the content equals to it with the explosive device minus.

42
00:03:49,940 --> 00:03:56,150
So basically what they are saying here is that regardless the content can be viewed regardless of the

43
00:03:56,150 --> 00:03:57,460
device.

44
00:03:57,780 --> 00:04:03,650
With a case where though the screen is small or large you can scale it and the initial scale Here's

45
00:04:03,680 --> 00:04:11,510
what point zero says here use as guillebeau Yes there is a user can scale or resize the screen to fit

46
00:04:12,140 --> 00:04:14,160
the app okay.

47
00:04:14,300 --> 00:04:15,830
Line 6 here is C..

48
00:04:15,860 --> 00:04:18,120
This is if you have any reference for your style show.

49
00:04:18,120 --> 00:04:19,700
This is where you need to include it.

50
00:04:19,880 --> 00:04:30,080
So this style sheet here last the reference I have put here to establish it so I have had the final

51
00:04:30,080 --> 00:04:36,910
chunk of code for the body tags school from line 8 to line 15.

52
00:04:37,160 --> 00:04:46,840
So the body tags still from line 8 and in between the body tag I have all saw nested SOM or the tag.

53
00:04:46,890 --> 00:04:51,010
Missed out Lee closing body tag.

54
00:04:52,550 --> 00:04:54,960
Okay enough the close and play tag.

55
00:04:55,340 --> 00:04:57,050
I just say that.

56
00:04:57,200 --> 00:05:03,120
Okay so in between the body tag I have got more than nested tags.

57
00:05:03,290 --> 00:05:05,020
So we've got the divided D.

58
00:05:05,030 --> 00:05:11,710
Basically is used to divide a section off a page and I'm giving it an I.D. attribute equal to.

59
00:05:12,430 --> 00:05:14,180
The idea is used for cause.

60
00:05:14,200 --> 00:05:22,600
How we use that to target that did during our as their styling line 10 here basically saying Hit one

61
00:05:22,600 --> 00:05:28,560
head in intact with a title to do list 11 is the import.

62
00:05:28,570 --> 00:05:31,740
This is where we will actually type the task.

63
00:05:31,750 --> 00:05:32,950
We want to do.

64
00:05:33,220 --> 00:05:37,770
And I'm giving it an idea with a valley of task again.

65
00:05:37,820 --> 00:05:41,490
I'll use this idea for stylin purposes later.

66
00:05:41,490 --> 00:05:48,490
I have also attached a button next to the input and the button I have given the button and a esrock

67
00:05:48,490 --> 00:05:49,760
Equals to add.

68
00:05:49,960 --> 00:05:53,620
So this is where the button will click to add a task.

69
00:05:53,620 --> 00:05:55,270
Once we've done the input.

70
00:05:55,660 --> 00:06:01,570
Okay an I'm giving the idea an attribute as well we'll use that to style as well.

71
00:06:01,930 --> 00:06:09,210
And here this is how you write a comment in Haiti email for you then wondered anything with a comment.

72
00:06:09,280 --> 00:06:11,210
The web browser will ignore.

73
00:06:11,290 --> 00:06:19,330
So you do a left angled bracket quote as cremation dashed that and then double dash and right angle

74
00:06:19,330 --> 00:06:23,070
bracket so we can see it's almost grey that's or anything with that.

75
00:06:23,220 --> 00:06:30,250
The web browser will not run that piece of code or write them line 13 of great in another Deve here

76
00:06:30,250 --> 00:06:32,360
would leave a D to dos.

77
00:06:32,370 --> 00:06:36,770
This here is where the to dos will be listed.

78
00:06:36,780 --> 00:06:41,650
Once we've said it probably they'll be listed inside this div right.

79
00:06:42,040 --> 00:06:46,210
I think 11 we've got a script tag So this is where we'll work.

80
00:06:46,240 --> 00:06:47,940
This javascript far will create it.

81
00:06:47,930 --> 00:06:53,160
Here we are making reference to it inside our hastier mail document.

82
00:06:53,350 --> 00:06:58,560
To own this group were right to be in this group far would be reference from here.

83
00:06:58,780 --> 00:07:02,330
Right so that's it for our ecmo document.

84
00:07:02,440 --> 00:07:06,100
If I just say that I think I have already.

85
00:07:06,130 --> 00:07:09,360
Let's run it so we can see what it looks like.

86
00:07:09,640 --> 00:07:14,830
So as the project failed I just open it up and double click.

87
00:07:14,830 --> 00:07:20,190
To run the terminal so we can see what the hastier may look like.

88
00:07:20,650 --> 00:07:23,770
As just the mindset a bit.

89
00:07:24,080 --> 00:07:27,130
Right so this is what our page looks like at the moment.

90
00:07:27,140 --> 00:07:30,870
This is where the task will input day tasks.

91
00:07:30,880 --> 00:07:34,750
And this is where we'll add it saw fit for the structure.

92
00:07:34,870 --> 00:07:43,260
In our next leg Your will be building or styling this content to make it look a bit prettier.

93
00:07:43,270 --> 00:07:44,430
Use in C assess.

94
00:07:44,650 --> 00:07:45,400
That's it.

95
00:07:45,520 --> 00:07:46,630
Thanks for watching.

96
00:07:46,630 --> 00:07:47,830
Bye for now.